<template>
    <el-card shadow="never">
        <template #header>
            <div class="card-header">
                <span>会员管理</span>
            </div>
        </template>
        <el-row :gutter="12">
            <el-col :span="5">
                <el-input placeholder="请输入用户名" v-model="searchContent"></el-input>
            </el-col>
            <el-col :span="5">
                <el-radio v-model="radio1" label="全部">全部</el-radio>
                <el-radio v-model="radio1" label="男">男</el-radio>
                <el-radio v-model="radio1" label="女">女</el-radio>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" @click="userSearch">搜索</el-button>
            </el-col>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column width="60" label="序号">
                <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column label="用户名" width="180">
                <template #default="scope">
                    <el-popover effect="light" trigger="hover" placement="right">
                        <template #default>
                            <p>ID：{{ scope.row.id }}</p>
                            <p>用户名: {{ scope.row.username }}</p>
                            <p>邮箱: {{ scope.row.email }}</p>
                        </template>
                        <template #reference>
                            <div class="name-wrapper">
                                <el-tag size="medium">{{ scope.row.username }}</el-tag>
                            </div>
                        </template>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column label="性别" width="180">
                <template #default="scope">
                    <span style="margin-left: 10px">{{ scope.row.gender }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="mini" type="danger" @click="userDelete(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="currentPage" @current-change="changePage">
        </el-pagination>
    </el-card>
</template>

<script>
import { onMounted, reactive, toRefs, ref } from "vue";
import axios from 'axios'
import { ElMessageBox, ElNotification } from "element-plus";

// 读取页面数据
function loadData(state) {
    const params={
        pageCurrent: state.currentPage,
        pageSize: state.pageSize,
        username: state.username,
    }
    axios({
        url: '/selectUserOffset',
        method: 'get',
        params: params,
    }).then(res => {
        // console.log(res.data.data)
        state.tableData = res.data.data.list;
        state.total = res.data.data.total // 总的记录数
    });
}
// 删除用户
function useUserDelete(state) {
    const userDelete = (id) => {
        // console.log('index=',index)
        console.log('id=', id)
        ElMessageBox.confirm("是否确认删除该用户？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            callback: (action) => {
                if (action == 'confirm') {
                    axios({
                        url: '/userdel',
                        method: 'get',
                        params: {
                            id: id
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.data.code == 200) {
                            ElNotification({
                                title: "成功",
                                message: "删除成功",
                                type: "success",
                                duration: 2000,
                            });
                            loadData(state)
                        } else {
                            ElNotification({
                                title: "失败",
                                message: "删除失败",
                                type: "error",
                                duration: 2000,
                            });
                        }
                    });
                }
            },
        });
    }
    return {
        userDelete
    }
}

// 搜索用户
function useUserSearch(state) {
    const userSearch = () => {
        state.currentPage = 1;
        const params = {
            username: state.searchContent,
            gender: state.radio1,
            pageCurrent: state.currentPage,
            pageSize: state.pageSize,
        }
        axios({
            url: '/userSearchOffset',
            method: 'get',
            params: params
        }).then(res => {
            // 搜索结果
            if (res.data.code == 200) {
                state.tableData = res.data.data.list
                state.total = res.data.data.total
            } else {
                state.tableData = [];
                ElNotification({
                    title: "失败",
                    message: "查无此信息",
                    type: "error",
                    duration: 2000,
                });
            }
        });
    };
    return {
        userSearch,
    }
}

export default {
    setup() {
        const state = reactive({
            tableData: [],
            total: 0,
            currentPage: 1,     // 当前页码
            pageSize: 3,
            searchContent: "",  // 搜索条件姓名
            radio1: "全部",       // 搜索条件性别
        });
        const url = import.meta.env.VITE_APP_URL;

        onMounted(() => {
            loadData(state);
        });
        // 分页-页面切换的时候执行该方法
        const changePage=(val)=>{
            state.currentPage = val;
            loadData(state);
        }

        return {
            ...toRefs(state), //...解构结构后不是响应式对象。toRefs数据转换成响应式对象
            url,
            ...useUserSearch(state),
            ...useUserDelete(state),
            changePage,
        };
    },
    methods: {
        // 序号-自动递增
        indexMethod(index) {
            return index = index + 1;
        }
    },
};
</script>
<style>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>